import React from 'react';
import { Card, Form, Input, Button, Switch, message, Space } from 'antd';
import { SaveOutlined, ReloadOutlined } from '@ant-design/icons';

const AppConfig: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = React.useState(false);

  // 模拟获取配置数据
  React.useEffect(() => {
    // 这里可以调用API获取当前配置
    form.setFieldsValue({
      appName: 'Ann Card CMS',
      appDescription: '卡片内容管理系统',
      enableRegistration: true,
      enableEmailVerification: false,
      maxCardsPerUser: 100,
      defaultTheme: 'light'
    });
  }, [form]);

  const handleSave = async (values: any) => {
    setLoading(true);
    try {
      // 这里调用API保存配置
      console.log('保存配置:', values);
      await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟API调用
      message.success('配置保存成功');
    } catch (error) {
      message.error('配置保存失败');
    } finally {
      setLoading(false);
    }
  };

  const handleReset = () => {
    form.resetFields();
    message.info('已重置为默认配置');
  };

  return (
    <div style={{ padding: '24px' }}>
      <Card title="应用配置" extra={
        <Space>
          <Button icon={<ReloadOutlined />} onClick={handleReset}>
            重置
          </Button>
          <Button 
            type="primary" 
            icon={<SaveOutlined />} 
            loading={loading}
            onClick={() => form.submit()}
          >
            保存
          </Button>
        </Space>
      }>
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSave}
          style={{ maxWidth: 600 }}
        >
          <Form.Item
            label="应用名称"
            name="appName"
            rules={[{ required: true, message: '请输入应用名称' }]}
          >
            <Input placeholder="请输入应用名称" />
          </Form.Item>

          <Form.Item
            label="应用描述"
            name="appDescription"
          >
            <Input.TextArea 
              placeholder="请输入应用描述" 
              rows={3}
            />
          </Form.Item>

          <Form.Item
            label="允许用户注册"
            name="enableRegistration"
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>

          <Form.Item
            label="启用邮箱验证"
            name="enableEmailVerification"
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>

          <Form.Item
            label="每用户最大卡片数"
            name="maxCardsPerUser"
            rules={[{ required: true, message: '请输入最大卡片数' }]}
          >
            <Input type="number" placeholder="请输入最大卡片数" />
          </Form.Item>

          <Form.Item
            label="默认主题"
            name="defaultTheme"
          >
            <Input placeholder="请输入默认主题" />
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default AppConfig;